<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery.js"></script>
		<title>Insert title here</title>
	</head>
<style type="text/css">
			h1 {
				text-align: center;
				padding-top: 40px;
			}

			.modal-body {
				position: relative;
				display: inline-block;
				overflow: hidden;
			}

			#img_input {
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				font-size: 200px;
			}

			button {
				line-height: 1.499;
				position: relative;
				display: inline-block;
				font-weight: 400;
				white-space: nowrap;
				text-align: center;
				background-image: none;
				border: 1px solid transparent;
				box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
				cursor: pointer;
				transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				touch-action: manipulation;
				height: 32px;
				padding: 0 15px;
				border-radius: 4px;
				color: #fff;
				background-color: #51A4E8;
				border-color: #fff;
				font-size: 20px;
			}

			#upload_text div {
				font-size: 12px;
			}
			#upload{
			text-align:center;
			}
		</style>
	<body>
		<h1>上传</h1>
		<div style="display: flex;justify-content: space-between;align-items: center;padding: 0 20%;margin-top: 130px;">
			
			<div style="display: flex;align-items: center;justify-content: center;">

				<div class="modal-body">
					<input id="img_input" multiple="multiple" type="file" />
					<button id='img_upload' style="height: 100px;width: 200px;">选择文件</button>
				</div>
				<div  style="margin-left: 20px;">
					<h5>选择的文件列表</h5>
					<div id='upload_text'></div>
					
				</div>
			</div>

			<div style="display: flex;align-items: center;">
				<div class="modal-footer">
					<button style="height: 100px;width: 200px;" type="button" onclick="upload();" class="btn btn-primary">提交文件</button>
				</div>
				<div id="" style="margin-left: 20px;">
					<h5>已提交文件数量: <span id='num'>0</span></h5>
				</div>
			</div>

			<div style="">
				<div class="modal-footer">
					<button style="height: 100px;width: 200px;" type="button" id='clear' class="btn btn-primary">清空所有已提交文件</button>
				</div>
			</div>
		</div>
		
		<div style="text-align: center;margin-top: 100px;">
			<button id='xz' style="height: 150px;width: 300px ;">下载处理后的文件</button>
		</div>
		<div>
			<div id='DvelopmentExcel'></div>
			<div id="upload"></div>
		</div>

		<div id="main" style="width:100%;">
			<div id="DvelopmentTarget"></div>
		</div>


	</body>
	<script type="text/javascript">
	$.get('/demo/excel/select.do',function(e){
		$('#num').text(e)
	})
	
	$('#img_upload').click(function() {
		$('#img_input').click()

	})
	$('#img_input').change(function(e) {
		let a = $("#img_input").prop("files")
		console.log(a);
		for (let i = 0; i < a.length; i++) {
			var element1 = document.createElement("div");
			element1.append(a[i].name)
			$('#upload_text').append(element1)
		}
	})

		function upload() {

			document.getElementById('DvelopmentExcel').innerHTML = "";

			var file = $("#img_input").prop("files")
			var fileObj = $("#img_input").prop("files")[0];
			console.log(file.length)
			 for (let i = 0; i < file.length; i++) {
				// console.log(file[i])
				var form = new FormData();

				form.append("file", file[i]); // 文件对象

				// XMLHttpRequest 对象
						
					var xhr = new XMLHttpRequest();
					xhr.open("post", "/demo/excel/put.do", false);
					xhr.onload = function() {
					
					};
					xhr.send(form);
					$('#num').text(xhr.responseText)
				
					xhr.onreadystatechange  = function() {
						
						if (xhr.readyState == 4 && xhr.status == 200) {
							var b = JSON.parse(xhr.responseText);
							var data = b;
							console.log(data)
						}
					}
			 }
				$('#upload_text').empty()
		
				$('#img_input').val('')
		

		}
		
		
		$('#clear').click(function(){
				// XMLHttpRequest 对象
				var form = new FormData();
			var xhr = new XMLHttpRequest();
			console.log(xhr);
			xhr.open("post", "/demo/excel/clear.do", true);
			xhr.onload = function() {
				console.log(1)
			};
			xhr.send(form);
			$('#num').text(0)
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					
				}
			}
		})

		


	
		
		$('#xz').click(function(){
			$.get('/demo/excel/get.do',function(e){
				let url = '/demo/Desktop/pasoft/excel/sm/'
				let a = JSON.parse(e)
				$('#upload').empty()
				for(let i=0;i<a.length;i++){
					console.log(url+a[i]);
					window.location.href=url+a[i]
					var element1 = document.createElement("a");
			        element1.href=url+a[i];
			        var txt =document.createTextNode('文件地址：'+a[i]);
			        element1.appendChild(txt);
			       
			        console.log(element1)
			        $('#upload').append(element1)
				}
			})
		}) 
		
		

	</script>

</html>
